<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        body{
            background-color: #2E1F47;
            width: 100%;
            overflow: hidden;
            overflow-y: scroll;
        }
        .content{
            padding: 2em;
        }
        .words{
            border:0px;
            border-left: 10px solid #403363;
            background-color: #4F4479;
            padding: 2em;
            margin-bottom: 1em;
        }
        .words .content{
            font-size: 20px;
            color:#E26A6E;
            font-weight: bold;
        }
        .words .footer{
            font-size: 16px;
            color: #CC4E52;
            text-align: right;
        }
        .row{
            display: flex;
            flex-direction: row;
            justify-content:space-between;
            flex-grow:10;
        }
        .images .row div{
            flex-grow:1;
            flex-shrink:1;
            height: 200px;
            display: flex;
            align-items:center;
        }
        .images .row div img{
            /*width: 40%;*/
            margin: 0 auto;
        }
        .form form{
            padding: 1em;
            background-color:rgba(226, 106, 110,0.5) ;
            width: 100%;
            box-shadow: rgba(226, 106, 110,0.8) 0px 0px 20px  ;
            border-radius: 10px;
            /*box-shadow: 0 0 5px rgba(226, 106, 110,0.5),
                        0 0 25px rgba(226, 106, 110,0.5),
                        0 0 50px rgba(226, 106, 110,0.5),
                        0 0 100px rgba(226, 106, 110,0.5);*/
            margin-bottom: 2em;
        }
        .form .field{
            margin-bottom: 1em;
        }
        .form .field input{
            padding: 1em;
            background-color: rgba(53, 39, 82,0.5);
            color: #fff;
            border:0px;
            border-radius: 10px;
        }
        .form .field input:focus{
            outline: none;
            box-shadow: rgba(53, 39, 82,0.9) 0px 0px 10px ;
        }
        .form .field textarea{
            width: 100%;
            padding: 1em;
            background-color: rgba(53, 39, 82,0.5);
            color: #fff;
            border:0px;
            border-radius: 10px;
            margin-bottom: 1em;
        }
        .form .field textarea:focus{
            outline: none;
            box-shadow: rgba(53, 39, 82,0.9) 0px 0px 10px ;
        }
        .form .row {
            justify-content:space-between;
        }
        .email{
            width: 70%;
            flex-shrink:1;
        }
        .save{
            width: 20%;
            flex-shrink:1;
            background-color: rgba(53, 39, 82,0.5);
            color: #fff;
            border: 0px;
            border-radius: 10px;
        }
        .form .field button:hover{
            box-shadow: rgba(53, 39, 82,0.9) 0px 0px 10px ;  
        }
        .footer{
            padding: absolute;
            width: 100%;
            text-align: center;
            font-size: 10px;
            color: rgb(178, 53, 57);
            bottom: 0;
        }
        .page1{
            width: 100%;
            height: 100vh;
            display: flex;
            align-items:center;
        }
        .page1 h1{
            width: 100%;
            text-align: center;
            color: #CC4E52;
        }
    </style>
</head>
<body>
    <div class="page1">
        <h1>page1</h1>
    </div>
    <div class="content">
        <div class="wrapper">
            <div class="words item">
                <div class="content">
                    窗含西岭千秋雪，门泊东吴万里船。
                </div>
                <div class="footer">
                    《绝句》杜甫
                </div>
            </div>
        </div>
        <div class="images">
            <div class="row wrapper">
                <div><img src="images/image1.png" alt="" class="item"></div>
                <div><img src="images/image2.png" alt="" class="item"></div>
            </div>
            <div class="row wrapper">
                <div><img src="images/image3.png" alt="" class="item"></div>
                <div><img src="images/image4.png" alt="" class="item"></div>
            </div>  
        </div>
        <div class="form wrapper">
            <form action="" class="item">
                <div class="field row">
                    <input type="text" placeholder="邮箱" class="email">
                    <button class="save">
                        保&nbsp;&nbsp;&nbsp;存
                    </button>
                </div>
                <div class="field">
                    <textarea name="" id="" cols="30" rows="10">留言</textarea>
                </div>
            </form>
        </div>
    </div>
    <div class="footer">
        test wj
    </div>
    <script src="js/gsap/gsap.min.js"></script>
    <script src="js/gsap/ScrollTrigger.min.js"></script>
    <script>
        gsap.registerPlugin(ScrollTrigger);
        const showDemo = ()=>{
            document.scrollingElement.scrollTo(0,0);
            const list = gsap.utils.toArray(".item");
            const timeline = gsap.timeline({
                    scrollTrigger: {
                        trigger: '.content',
                        start: 'top center-=300px',
                        end: 'bottom top',
                        // markers: true,
                        scrub: true,
                        pin: true,
                    }
                })
            list.forEach((elem,index)=>{
                const [x,xEnd] = index %2?["100%",-0]:[elem.scrollWidth*-1,0];
                gsap.fromTo(elem,{x},{
                    x:xEnd,
                    scrollTrigger:{
                        trigger:elem,
                        scrub:0.6
                    }
                });
                //timeline.fromTo(elem,{x: innerHeight * 1})
                /*console.log(document.body.scrollTop);
                const [x,xEnd] = index %2?["100%",-0]:[elem.scrollWidth*-1,0];
                console.log(x,xEnd);
                gsap.fromTo(elem,{x},{
                    x:xEnd,
                    scrollTrigger:{
                        trigger:elem,
                        scrub:0.6
                    }
                }); */ 
            })
        }
        showDemo();
    </script>
</body>
</html>